<template>
	<div class="catfish">
		<h2>数据准备 - 新商户加盟</h2>
		<form class="beforeSign" action="">
			<div>商户手机号：
				<input type= "text" v-model="mobile" placeholder="请输入商户手机号"> 
			</div>
			<div>执行环境：
				<select v-model="env">
					<option disabled value="">请选择</option>
					<option v-for="item in envList" :key="item"> {{ item }} </option>
				</select>
			</div>
			<div>加盟品牌：
				<select v-model="brandCode">
					<option disabled value="">请选择</option>
					<option v-for="item in brandList" :key="item.brandCode" :value="item.brandCode">{{ item.brandName}}</option>
				</select>
			</div>
			<div>加盟品牌对应等级：
				<select v-model="brandLevel"> 
					<option disabled value="">请选择</option>
					<option v-for="item in subBrandLevelList" :key="item" :value="item"> {{ item }} </option>
				</select>
			</div>
		</form>
		<button @click="testMerchantJoin(env, mobile, brandName, brandLevel)">确认执行</button>
		<hr />
		<div>加盟结果： {{resdata }} </div>
		<!-- <h1>以下是纯粹学习axios的使用，为后续前后端打通做准备</h1>
		<button @click="testMerchantWelcome" > 测试Get请求 </button>  
		<button @click="testMerchantJoin" > 测试Post请求 </button> -->
	</div>
</template>

<script type="text/javascript">

export default {
	name: 'catfish',
	data() {
		return {
			envList: ['Dev','Test', 'UAT'],
			env: "",
			mobile: "",
			brandCode: "",
			brandLevel: "",
			resdata: "",
			brandList: [
				{
					'brandCode': "jzmc",
					'brandName': "酱汁满串"
				},{
					'brandCode': "ahys",
					'brandName': "阿海爷叔"
				}],
			brandLevelList: [
				{
					'brandCode': "jzmc",
					'brandLevel': ["先付后收", "效果付费"]
				},
				{
					'brandCode': "ahys",
					'brandLevel': ["不收款下拉无"]
				}]
		}
	},
	computed:{
		brandName () {
			let _brandInfo = this.brandList.find(brand => brand.brandCode === this.brandCode)
			return _brandInfo ? _brandInfo.brandName : "没找到"
		},
		subBrandLevelList () {
			let _brandInfo = this.brandLevelList.find(brand => brand.brandCode === this.brandCode)
			return _brandInfo ? _brandInfo.brandLevel : []
		}
	},
	methods:{
		testMerchantWelcome () {
			this.$axios({
				method:"get",
				url:"/catfish/welcome",
				params: {
					"mobile": this.mobile
				},
				crossdomain: true,
				timeout:3000
			}).then(res => {
				console.log(res.data)
			})
		},
		testMerchantJoin() {
			this.$axios({
				method: "post",
				url: "/catfish/merchantJoin",
				data: {
					"env": this.env,
					"mobile": this.mobile,
					"brandName": this.brandName,
					"brandLevel": this.brandLevel
				},
				crossdomain: true,
				timeout: 60000
			}).then( res => {
				console.log(res)
				this.resdata = res.data.data
			})
		}
	}
}
</script>

<style type="text/css">
.beforeSign div{
	list-style: none;
	text-align: left;
	margin-left: 50px;
}
</style>